<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>基础表格</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
</head>

<body>
<h1>基础表格</h1>
<table class="table">
    <thead>
    <tr>
        <th>表格标题</th>
        <th>表格标题</th>
        <th>表格标题</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>表格单元格</td>
        <td>表格单元格</td>
        <td>表格单元格</td>
    </tr>
    <tr>
        <td>表格单元格</td>
        <td>表格单元格</td>
        <td>表格单元格</td>
    </tr>
    </tbody>
</table>
<h1>斑马线表格</h1>
<table class="table table-striped">
    <thead>
    <tr>
        <th>表格标题</th>
        <th>表格标题</th>
        <th>表格标题</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>表格单元格</td>
        <td>表格单元格</td>
        <td>表格单元格</td>
    </tr>
    <tr>
        <td>表格单元格</td>
        <td>表格单元格</td>
        <td>表格单元格</td>
    </tr>
    <tr>
        <td>表格单元格</td>
        <td>表格单元格</td>
        <td>表格单元格</td>
    </tr>
    <tr>
        <td>表格单元格</td>
        <td>表格单元格</td>
        <td>表格单元格</td>
    </tr>
    </tbody>
</table>
<h1>带边框的表格</h1>
<table class="table table-bordered">
    <thead>
    <tr>
        <th>表格标题</th>
        <th>表格标题</th>
        <th>表格标题</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>表格单元格</td>
        <td>表格单元格</td>
        <td>表格单元格</td>
    </tr>
    <tr>
        <td>表格单元格</td>
        <td>表格单元格</td>
        <td>表格单元格</td>
    </tr>
    <tr>
        <td>表格单元格</td>
        <td>表格单元格</td>
        <td>表格单元格</td>
    </tr>
    <tr>
        <td>表格单元格</td>
        <td>表格单元格</td>
        <td>表格单元格</td>
    </tr>
    </tbody>
</table>
<h1>鼠标悬浮高亮的表格</h1>
<table class="table table-striped table-bordered table-hover">
    <thead>
    <tr>
        <th>表格标题</th>
        <th>表格标题</th>
        <th>表格标题</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>表格单元格</td>
        <td>表格单元格</td>
        <td>表格单元格</td>
    </tr>
    <tr>
        <td>表格单元格</td>
        <td>表格单元格</td>
        <td>表格单元格</td>
    </tr>
    <tr>
        <td>表格单元格</td>
        <td>表格单元格</td>
        <td>表格单元格</td>
    </tr>
    <tr>
        <td>表格单元格</td>
        <td>表格单元格</td>
        <td>表格单元格</td>
    </tr>
    </tbody>
</table>
<h1>紧凑型表格</h1>
<table class="table table-condensed">
    <thead>
    <tr>
        <th>表格标题</th>
        <th>表格标题</th>
        <th>表格标题</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>表格单元格</td>
        <td>表格单元格</td>
        <td>表格单元格</td>
    </tr>
    <tr>
        <td>表格单元格</td>
        <td>表格单元格</td>
        <td>表格单元格</td>
    </tr>
    <tr>
        <td>表格单元格</td>
        <td>表格单元格</td>
        <td>表格单元格</td>
    </tr>
    <tr>
        <td>表格单元格</td>
        <td>表格单元格</td>
        <td>表格单元格</td>
    </tr>
    </tbody>
</table>
<h1>响应式表格</h1>
<div class="table-responsive">
    <table class="table table-bordered">
        <thead>
        <tr>
            <th>表格标题</th>
            <th>表格标题</th>
            <th>表格标题</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>表格单元格</td>
            <td>表格单元格</td>
            <td>表格单元格</td>
        </tr>
        <tr>
            <td>表格单元格</td>
            <td>表格单元格</td>
            <td>表格单元格</td>
        </tr>
        <tr>
            <td>表格单元格</td>
            <td>表格单元格</td>
            <td>表格单元格</td>
        </tr>
        <tr>
            <td>表格单元格</td>
            <td>表格单元格</td>
            <td>表格单元格</td>
        </tr>
        </tbody>
    </table>
</div>
</body>
</html>